<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="js/bootstrap_5.1.1_js_bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap_5.1.1_css_bootstrap.min.css">
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	nav{
		background-color:white;
		display: inline-block;
		position: relative;
		width: 100vw;
		height: 10vh;
		position: fixed;
		z-index: 1;
		font-size: 1vw;
		color: rgb(93, 79, 87);
		float: right;
	}
	nav a{
	     position: relative;
	     margin-top: 2%;
	     margin-right: 4%;
	     right: 15%;
	     font-size: 2vh;
	}
	a{
		text-decoration: none;
		color: black;
		font-weight:bold;
	}
	a:hover{
		color: rgb(105, 109, 115);
	}
	#log{
		width:12vw;
		height: 100%;
		display: inline-block;
		position: relative;
		left: 10%;
	}
	body{
		background-color: rgb(245, 246, 250);
	}
	#box{
		position: relative;
		top: 12vh;
		margin: auto;
		width:80vw;
		height: 80vh;
	}
	#head{
		background-color: white;
        width: 100%;
        height: 6vh;
	}
	.serchtext{
		position: relative;
		top: 2px;
		left: 30vw;
		width: 20%;
	}
	.serchbtn{
		position: relative;
		left: 26vw;
		color: white;
		bottom: 4vh;
		margin-top:2px;
		background-color: rgb(0, 174, 236);
	}
	#m{
		position: relative;
		float: left;
		width: 100%;
		height: 40%;
		background-color:white;
	}
	#m img{
		position: relative;
		margin-top: 1%;
		margin-left: 1%;
		width: 15%;
		height: 50%;
	}
	#m p{
		margin-left: 1%;
		margin-top: 1%;
		width: 30%;
	}
	#b{
		position: relative;
		margin-top: 2vh;
		height: 50%;
		width: 100%;
	}
	#b div{
		position: relative;
		margin-left: 0.5vw;
		margin-top: 2%;
        height: 50%;
        background-color: white;
	}
	#img2{
		position:absolute;
		top:5vh;
		right:15vw;
		width:26vw;
	}
	.pageBar{
		margin: auto;
		position: relative;
		top: 55vh;
        width: 20vw;
        height: 4vh;
	}
	.pageBar a{
		border:0.1vh solid rgb(197, 197, 213);
	}
</style>
<body>
		<nav>
		<img src="img/logo.png" alt="" id="log">
	</nav>
	<div id="box">
		<div id="head">
		<input type="text"  class="form-control serchtext" placeholder="请输入搜索条件">
		<button class="btn serchbtn">搜索</button>
		</div>
		<div id="m">
			<img src="" alt="" id="img1">
			<p>
				贴吧名:palteName
			</p>
			
			<p>
				创建时间:date
			</p>
		</div>
		<div id="b" class="row">
		</div>
		<div class="pageBar">
		</div>
		<img src="img/5.jpg" alt="" id="img2">
	</div>
	
</body>
<script src="js/jquery.min.js"></script>
<script>
var params = location.search.substring(1);
window.onload=function(){
	searchPlate();
	searchPost(1,4);
}	
var currentPage;
	function searchPlate(){
		$.ajax({
			type:"POST",
			url:"Platems.do",
			data:{
				plateId:params.split("&")[0].split("=")[1]
			},
			success:function(data){
				var Plate = data;
				$("#img1").attr("src", Plate.plateIconImg);
				$("#m").find("p:nth-of-type(1)").text("贴吧名:"+ Plate.plateName);
				var time = new Date(Plate.regDate);
				var year= time.getFullYear()  //年
			    var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
			    var day = ("0" + time.getDate()).slice(-2); //日
			     var mydate = year + "-" + month + "-" + day;
				$("#m").find("p:nth-of-type(2)").text("创建时间:"+mydate);
			}
		})
	}
	
	
	function searchPost(pageNum,pageSize){
		$.ajax({
			type:"POST",
			url:"Plate.do",
			data:{
				plateId:params.split("&")[0].split("=")[1],
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				$("#b").empty();
				console.log(data);
				var Post = data.data;
				for(var i = 0; i<Post.length;i++){
					var str1=Post[i].postText.split("<p>").join("").split("</P>").join("").split("<P>").join("").split("</p>").join("").substring(0,100)+"...";
					var $p=$("<p>"+str1+"</p>");
					var $div=$("<div class='t1'  onclick=intoPost("+Post[i].postId+","+params.split("&")[1].split("=")[1]+")></div>").html(Post[i].postTitle+"<hr/>").append($p);
					$("#b").append($div);
				}
				makePageBar(data);
			}
		})
	}
	function makePageBar(data){
		$(".pageBar").empty();
		var totalPages = data.totalPages;
		var hasPrev = data.hasPrev;
		var hasNext = data.hasNext;
		var pageNum = data.pageNum;
		if(hasPrev){
			var $firstBtn = $("<a onclick='searchPost(1,4)' href='javascript:void(0);'>首页</a>");
			var $prevBtn = $("<a onclick='searchPost("+(pageNum-1)+",4)' href='javascript:void(0);'>上一页</a>");
			$(".pageBar").append($firstBtn).append($prevBtn);
		}
		
		for(var i =1; i<=totalPages;i++){
			var $pageBtn = $("<a onclick='searchPost("+i+",4)' href='javascript:void(0);'></a>").text(i);
			$(".pageBar").append($pageBtn);
		}
		if(hasNext){
			var $lastBtn = $("<a onclick='searchPost("+totalPages+",4)' href='javascript:void(0);'>尾页</a>");
			var $nextBtn = $("<a onclick='searchPost("+(pageNum+1)+",4)' href='javascript:void(0);'>下一页</a>");
			$(".pageBar").append($nextBtn).append($lastBtn);
		}
	}
	
	$("button").click(function(){
		if($('#serchtext').val() != ""){
			searchIndex(1,4);
		}
		
	})
	
	function searchIndex(pageNum,pageSize){
			$.ajax({
				type:"POST",
				url:"post.do",
				data:{
					postTitle:$('#serchtext').val(),
					pageNum:pageNum,
					pageSize:pageSize
				},
				success:function(data){
					$("#b").empty();
					console.log(data);
					var Post = data.data;
					currentPage = data.pageNum;
					for(var i = 0; i<Post.length;i++){
						var str1=Post[i].postText.split("<p>").join("").split("</P>").join("").split("<P>").join("").split("</p>").join("").substring(0,100)+"...";
						var $p=$("<p>"+str1+"</p>");
						var $div=$("<div class='t1'></div>").html(Post[i].postTitle+"<hr/>").append($p);
						$("#b").append($div);
					}
					makePageBarind(data);
				}
			})
		}
	function intoPost(postId,userId){
		window.location.href ="post_reply.html?id="+postId+"&userId="+userId;
	}
	function makePageBarind(data){
		$(".pageBar").empty();
		var totalPages = data.totalPages;
		var hasPrev = data.hasPrev;
		var hasNext = data.hasNext;
		var pageNum = data.pageNum;
		if(hasPrev){
			var $firstBtn = $("<a onclick='searchIndex(1,4)' href='javascript:void(0);'>首页</a>");
			var $prevBtn = $("<a onclick='searchIndex("+(pageNum-1)+",4)' href='javascript:void(0);'>上一页</a>");
			$(".pageBar").append($firstBtn).append($prevBtn);
		}
		
		for(var i =1; i<=totalPages;i++){
			var $pageBtn = $("<a onclick='searchIndex("+i+",4)' href='javascript:void(0);'></a>").text(i);
			$(".pageBar").append($pageBtn);
		}
		if(hasNext){
			var $lastBtn = $("<a onclick='searchIndex("+totalPages+",4)' href='javascript:void(0);'>尾页</a>");
			var $nextBtn = $("<a onclick='searchIndex("+(pageNum+1)+",4)' href='javascript:void(0);'>下一页</a>");
			$(".pageBar").append($nextBtn).append($lastBtn);
		}
	}
	$("#log").click(function(){
		window.location.href ="index.html?id="+params.split("&")[1].split("=")[1] ;
	})
</script>
</html>